<script setup lang="ts">
defineOptions({
  name: "board"
});

import workbench from "./components/workbench.vue";
import distribution from "./components/distribution.vue";
import consumeStatistcs from "./components/consumeStatistcs.vue";

type Props = {
  height?: string;
};

const props = withDefaults(defineProps<Props>(), { height: "648px" });
</script>

<template>
  <div class="fab-board">
    <div class="fab-board-item fab-board-workbench"><workbench /></div>
    <div class="fab-board-item fab-board-distribution"><distribution /></div>
    <div class="fab-board-item fab-board-use-statistcs">
      <consumeStatistcs />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.fab-board {
  display: flex;
  gap: 16px;
  justify-content: flex-start;
  min-height: v-bind(height);

  .fab-board-item {
    min-height: 100%;
  }

  .fab-board-workbench {
    flex: 1;
  }

  .fab-board-distribution {
    flex: 1;
  }

  .fab-board-use-statistcs {
    flex: 2;
  }
}
</style>
